<template>
  <div class="content-container mainPadding">
    <el-card class="box-card searchCard" shadow="never">
      <div class="searchParameter">
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="68px"
          size="small"
        >
          <el-form-item label="区域" style="letter-spacing: 12px" prop="value1">
            <el-select v-model="queryParams.value1" filterable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业名称" prop="name">
            <el-input v-model="queryParams.ENRERPEISENAME" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="站点名称" prop="name1">
            <el-input v-model="queryParams.SUBNAME" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="雨水排口" prop="value2">
            <el-select v-model="queryParams.rain" filterable placeholder="请选择">
              <el-option
                v-for="item in outletStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="污水排口" prop="value3">
            <el-select v-model="queryParams.sewage" filterable placeholder="请选择">
              <el-option
                v-for="item in outletStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="水质" style="letter-spacing: 12px" prop="value4">
            <el-select v-model="queryParams.waterQuality" filterable placeholder="请选择">
              <el-option
                v-for="item in waterQuality"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>

      </div>
      <div class="searchBtn">
        <div class="styleBtn">
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="resetQuery">重置</el-button>
          <el-button type="success">导出</el-button>
        </div>
      </div>
    </el-card>
    <div class="table-container">
      <el-table
        :data="dataSource"
        style="width: 100%"
        ref="table"
        v-loading="loading"
        :max-height="tableHeight"
      >
        <el-table-column
          label="序号"
          type="index"
          width="60"
        >
        </el-table-column>
        <el-table-column
          prop="ENRERPEISENAME"
          align="center"
          label="企业"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="SUBNAME"
          align="center"
          label="站点"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          prop="DAT"
          align="center"
          label="时间"
          width="150"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="水质"
          width="100"
        >
          <template slot-scope="scope">
            <div class="font_color_blue" v-if="scope.row.WATER_QUALITY=='0'">正常</div>
            <div class="font_color_red" v-else-if="scope.row.WATER_QUALITY=='1'">超标</div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="雨水排口"
          width="100"
        >
          <template slot-scope="scope">
            <div class="font_color_blue" v-if="scope.row.RAIN_S=='0'"><img class="mr5 imgStatus"
                                                                           src="../../../assets/images/img/close.png"
                                                                           alt=""
            >关
            </div>
            <div class="font_color_blue" v-else-if="scope.row.RAIN_S=='1'"><img class="mr5 imgStatus"
                                                                                src="../../../assets/images/img/open.png"
                                                                                alt=""
            >开
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="污水排口"
          width="100"
        >
          <template slot-scope="scope">
            <div class="font_color_blue" v-if="scope.row.SEWAGE_S=='0'"><img class="mr5 imgStatus"
                                                                             src="../../../assets/images/img/close.png"
                                                                             alt=""
            >关
            </div>
            <div class="font_color_blue" v-else-if="scope.row.SEWAGE_S=='1'"><img class="mr5 imgStatus"
                                                                                  src="../../../assets/images/img/open.png"
                                                                                  alt=""
            >开
            </div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="系统模式"
          width="100"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.CTRL_M=='0'">自动</div>
            <div v-else-if="scope.row.CTRL_M=='1'">手动</div>
            <div v-else></div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采样点液位">
          <el-table-column
            align="center"
            label="监测值"
            width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.WaterL">
                <!--                <span class="font_color_red">{{ scope.row.WaterL }}</span>-->
                <span>{{ scope.row.WaterL }}</span>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="标准"
            width="100"
          >
            <template slot-scope="scope">
              <span class="font_color_base"
              >{{ scope.row.WaterL_value1 }}{{ scope.row.WaterL_value2 ? '-' + scope.row.WaterL_value2 : '' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="降雨量">
          <el-table-column
            align="center"
            label="监测值"
            width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.WaterL">
                <!--                <span class="font_color_red">{{ scope.row.WaterL }}</span>-->
                <span>{{ scope.row.PRCP }}</span>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="标准"
            width="100"
          >
            <template slot-scope="scope">
              <span class="font_color_base"
              >{{ scope.row.PRCP_value1 }}{{ scope.row.PRCP_value2 ? '-' + scope.row.PRCP_value2 : '' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="COD">
          <el-table-column
            align="center"
            label="监测值"
            width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.COD">
                <!--                <span class="font_color_red">{{ scope.row.WaterL }}</span>-->
                <span>{{ scope.row.COD }}</span>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="标准"
            width="100"
          >
            <template slot-scope="scope">
              <span class="font_color_base"
              >{{ scope.row.COD_value1 }}{{ scope.row.COD_value2 ? '-' + scope.row.COD_value2 : '' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="氨氮">
          <el-table-column
            align="center"
            label="监测值"
            width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.NH3">
                <!--                <span class="font_color_red">{{ scope.row.WaterL }}</span>-->
                <span>{{ scope.row.NH3 }}</span>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="标准"
            width="100"
          >
            <template slot-scope="scope">
              <span class="font_color_base"
              >{{ scope.row.NH3_value1 }}{{ scope.row.NH3_value2 ? '-' + scope.row.NH3_value2 : '' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="PH">
          <el-table-column
            align="center"
            label="监测值"
            width="100"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.PH">
                <!--                <span class="font_color_red">{{ scope.row.WaterL }}</span>-->
                <span>{{ scope.row.PH }}</span>
              </div>
              <div v-else></div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="标准"
            width="100"
          >
            <template slot-scope="scope">
              <span class="font_color_base"
              >{{ scope.row.PH_value1 }}{{ scope.row.PH_value2 ? '-' + scope.row.PH_value2 : '' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="FLOWS"
          align="center"
          label="瞬时流量"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="FLOWL"
          align="center"
          label="累积流量"
          width="100"
        >
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="handleQuery"
      />
    </div>
  </div>
</template>

<script>
import { Mixin } from '@/utils/mixin/Mixin'
import { outletStatus, waterQuality } from '@/utils/baseData'

export default {
  name: 'Index',
  mixins: [Mixin],
  data() {
    return {
      disableMixinCreated: false,
      outletStatus: outletStatus,
      waterQuality: waterQuality,
      url: {
        list: '/realdata/getRealdataList'
      }
    }
  },
  watch: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.content-container {
  .box-card {
    width: 100%;
    min-height: 152px;
    border-radius: 10px;
    background-color: #FFFFFF;
  }

  .imgStatus {
    position: relative;
    top: 2px;
  }
}

</style>
